<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <check-item-edit ref="checkItemEdit" v-on:save-finished="searchCheckItem"></check-item-edit>
      <el-row style="padding-bottom: 8px;">
        <el-col :span="12">
          <el-input placeholder="标题" size="small" style="width:260px" v-model="search.name">
            <el-button slot="append" icon="el-icon-search" @click="searchCheckItem"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleCreateUser">添加</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="checkItemList" border size="mini" header-cell-class-name="header-row">
            <el-table-column
              prop="code"
              label="编码"
              align="center"
              header-align="center"
              width="80px"
            ></el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              align="center"
              header-align="center"
              width="100px"
            ></el-table-column>
            <el-table-column
              prop="keywords"
              label="关键词"
              header-align="center"
              align="center"
              width="150px"
            ></el-table-column>
            <el-table-column
              prop="tHealthPlanType.name"
              label="所属类别"
              header-align="center"
              align="center"
              width="100px"
            ></el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              header-align="center"
              :formatter="formatterState"
              align="center"
              width="80px"
            ></el-table-column>
            <el-table-column
              prop="content"
              label="内容"
              header-align="center"
              align="center"
              width="350px"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              header-align="center"
              align="center"
              width="350px"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleEditCheckItem(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[5, 10, 15]"
            :page-size="search.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="checkItemTotal"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import CheckItemEdit from '@/components/dingming/healthPlan/healthPlanEdit';
import { listMeals,getMealsById,listMealsType } from "@/api/dingming/healthPlan";

export default {
  components: { CheckItemEdit },
  data() {
    return {
      checkItemList: [],
      checkItemTotal: 0,
      loading: true,
      search: {
        name: "",
        offset: 0,
        limit: 5,
        currentPage: 1
      }
    };
  },
  methods: {
    /*查询*/
    searchCheckItem() {
      this.loading = true;
      listMeals(this.search)
        .then(response => {
          this.checkItemList = response.data.rows;
          this.checkItemTotal = response.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /*分页*/
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = (this.search.currentPage - 1) * val;
      this.searchCheckItem();
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit;
      this.search.currentPage = val;
      this.searchCheckItem();
    },

    /*处理数据显示*/
    formatterState(row,column){
      if(row.state==1){
        return "禁用"
      }
      return "启用"
    },

    /*点击编辑按钮*/
    async handleEditCheckItem(row) {
      this.loading = true
      try {
        let [checkItem,allMealsType] = await Promise.all([
          getMealsById(row.id),
          listMealsType()
        ])
        this.$refs.checkItemEdit.$emit('openEditCheckItemDialog',checkItem.data,allMealsType.data)
        this.loading = false
      } catch(error) {
        this.outputError(error)       
      }
    },

    /*点击添加按钮*/
    async handleCreateUser() {
      this.loading = true
      try {
        let [allMealsType] = await Promise.all([
          listMealsType()
        ])
        console.log(allMealsType.data)
        this.$refs.checkItemEdit.$emit('openAddCheckItemDialog',allMealsType.data)
        this.loading = false
      } catch(error) {
        this.outputError(error)        
      }      
    },

    /*错误提示*/
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    },

    /*初始化数据*/
    async pageInit() {
      this.loading = true;
      try {
        let [responseData] = await Promise.all([listMeals(this.search)]);
        this.checkItemList = responseData.data.rows;
        this.checkItemTotal = responseData.data.total;
        this.loading = false;
      } catch (error) {
        this.outputError(error);
      }
    }
  },
  created() {
    this.pageInit();
  }
};
</script>

<style>
</style>